<template>
  <Layout>
        <Row class="query-form">
            <Col span="24">
                <Button size="large" type="success" class="ivu-btn-add" icon="md-add" @click="createGroup()">新增组</Button>
            </Col>
        </Row>
      <Table ref="table" size="small" :loading="buttonLoading" :height="tableHeight" no-data-text="没有查询到相关数据!" highlight-row stripe border width="100%" :columns="columns1" :data="resultData">
      </Table>
      <Page :total="dataCount" :page-size="pageSize" :page-size-opts="pageSizeArray" @on-change="changepage" @on-page-size-change="nowPageSize" show-total show-sizer show-elevator />

    <!-- 响应结果内容展示 -->
    <!-- 添加弹出框 @on-ok="当点击确定时触发的函数"-->
    <Modal v-model="model" width="1000"  title="流程定义详细信息">
        <Table no-data-text="没有查询到相关数据!" highlight-row stripe border width="100%" height="350" :columns="columns2" :data="resultData1">
        </Table>

        <Modal v-model="model3" width="250"  title="维护工作组人员">
          <template>
            <div>
              <Table border ref="selection" :columns="columns4" :data="oldUsers" @on-selection-change="selectionChange"></Table>
              <br/>
            </div>
            <div slot="footer"><Button    long @click="delGroup">删除</Button></div>
          </template>
        </Modal>
    </Modal>
     <Modal v-model="model1" width="500" title="新增工作组" :transfer=false :closable="false" :mask-closable="false" >
            <Form ref="formCustom" :model="formCustom" :rules="ruleCustom"  :label-width="100">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="24">
                        <FormItem label="工作组名称" prop="groupName">
                            <Input type="text" v-model="groupName"></Input>
                        </FormItem>
                    </Col>
                  </Row>
                 <!-- <Row type="flex" justify="center" class="code-row-bg">
                    <Col span="23" >
                        <FormItem>
                            <Button    class='ivu-btn-save' @click="commitGroup" >确定</Button>
                            <Button type="text"  class='ivu-btn-cancel'  @click="modalcancel" >取消</Button>
                        </FormItem>
                    </Col>
                </Row>-->
            </Form>
         <div slot="footer">
             <Button    class='ivu-btn-save' @click="commitGroup" >确定</Button>
             <Button type="text"  class='ivu-btn-cancel'  @click="modalcancel" >取消</Button>
         </div>
        </Modal>

  <Modal :transfer=true footer-hide v-model="userInRoleListModal"  :width=850 :styles="{top: '20px'}">
            <UserInGroupList  :listData="listData" :groupId="groupId" :totalNum="totalNum">
            </UserInGroupList>
        </Modal>
    <!-- 底部分页条 -->
  </Layout>
</template>

<script>
  import {Api} from '../../../api/index.js'
  import UserInGroupList from './userInGroupList.vue'
  import { sessionStorage } from '../../../common/cacheUtils.js';
  export default {
    components: {
            UserInGroupList
        },
    data() {
      return {
          buttonLoading:false,
      	tableHeight:400,
        selectStyle: {
          width: '160px',
          height: '30px'
        },
        condition: {
          type: '',
          date: new Date()
        },
        //弹出框样式
        PopupStyle: {
          width: '260px',
          height: '30px',
          marginRight: '10px'
        },
        pageSizeArray: [5, 10, 20, 50],
        dataCount: 0,
        pageSize: 50,
        currentPage:1,
				cityList:[],
				selectshow:false,
        userInRoleListModal: false,
        listData:[],
        totalNum:0,
        columns1: [{
          title: '序号',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + 1);
          }
        },
          {
            title: '流程定义名称',
            align: 'center',
            key: 'processDefinitionKey'

          },
          {
            title: '流程定义类型',
            align: 'center',
            key: 'processDefinitionName'
          },
          {
            title: '操作',
            key: 'action',
            width: 142,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('A', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                      fontSize: '12px',
                  },
                  on: {
                    click: () => {
                      this.details(params.row.processDefinitionId);
                    }
                  }
                }, '维护')
              ]);
            }
          }
        ],
        columns2: [{
          title: '序号',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
          }
        },
          {
            title: '流程节点名称',

            align: 'center',
            key: 'nodeName'

          },
          {
            title: '工作候选组',

            align: 'center',
            key: 'groupStr'

          },
          {
            title: '组内人员',
            align: 'center',
            key: 'userStr'

          },
          {
            title: '操作',
            key: 'action',
            width: 142,
            align: 'center',
            render: (h, params) => {
              var is;
              if (params.row.nodeGroup.length < 1) {
                is = true;
              } else {
                is = false;
              }
              return h('div', [
                h('A', {
                  props: {
                    disabled: is,
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                      fontSize: '12px',
                  },
                  on: {
                    click: () => {
                      this.userInRoleListModal = true;
                      this.groupId = params.row.nodeGroup[0].group.id;
                      this.queryUsers(this.groupId);
                    }
                  }
                }, '维护')
            ]);
          }
        }],
        columns4: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '姓名',
            align: 'center',
            key: 'firstName'
          }
        ],

        map: {
          weekVerId: '',
          adjustContent: '',
          weeklyVerificationPlanDetailedListDate: [],
        },
        data1: [{
          name:"管理员",
          id:1
        }
        ],
        editArrangeTime: '',
        weekVerDetIds: '',
        editIndex: -1,
        selection: '',
        tablesta: false,
        Cancelalloptions: false,
        weeklyAddModel: false,
        model1: false,
        model: false,
        model2:false,
        model3:false,
        adjustmentModel: false,
        groupId:'',
        groupName:'',
        processDefinitionId:'',
        flowType: '',
        contact: '',
        flowCaliber: '',
        custId: '',
        select: {},
        arrangeTime: '',
        customerSelectDate: [],
        resultData: [],
        resultData1: [],
        selectData: [],
        oldUsers:[],
        userData:[],
        delUsers:[],
        weekPlanData: [],
        organizationSubmissionDate: {
          startTime: "",
          endTime: "",
          madeTime: "",
          contact: "",
          detailedDate: [],
        },
        groups:{},
        users:[{
          id:"qweqwe123",
          name:"李四"
        },{
          id:"qweqwe222",
          name:"张三"
        }
        ],

      }
    },
    mounted: function() {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
      this.selectCertificate();
//      this.getgroups();
    },
    methods: {
     queryUsers(groupId){
               let  data = {};
                data.fromPage = 1;
                data.pageSize = 10;
                data.userName = '';
                data.groupId = groupId;
       this.groupId = groupId;
                this.$http.get(Api.userInGroupId + groupId, {params : data}).then(res => {
                    this.listData = res.data.rows;
                    this.totalNum = res.data.total;
                }).catch(e => {
                    //this.$Message.error('请求失败');
                })
     },
      filterMethod (data, query) {
        return data.label.indexOf(query) > -1;
      },
      modalcancel() {
          this.model1 = false
      },
      reset() {
        this.select.contact = "";
        this.select.reqEndTime = "";
      },
      selectCertificate() {
         this.buttonLoading=true
        if(this.pageSize == undefined) {
          this.pageSize = 5;
        }
        let userId = JSON.parse(sessionStorage('userId').get('userId'))
        var url = Api.allFild;
        this.$http.post(url, "starPage=" + this.currentPage + "&size=" + this.pageSize).then((res) => {
          this.dataCount = res.data.totalSize; //总条数
          this.resultData = res.data.data; //查询到的结果数据
            this.buttonLoading=false
        })

      },
      //计划详情查询对话框
      details(processDefinitionId) {
        this.processDefinitionId = processDefinitionId;
        var url3 = Api.allNode + this.processDefinitionId;
        this.$http.get(url3).then((res) => {
          this.resultData1 = res.data.data;
        })
        this.model = true;
      },
      getgroups(){
    //    var url3 = this.global.baseURL + "/group/activiti/allgroup";
     //   this.$http.get(url3, ).then((res) => {
     //     this.groups = res.data.data;
      //    console.log(this.groups);
       // })
      },

      commitGroup(){
        this.$http.post(Api.commitGroup,"groupName="+this.groupName ).then((res) => {
          if (res.data.message.equals("success")){
            this.$Message.info('新增成功！');
          }
        })
      },
      /*commitUserToGroup(){
        var url3 = this.global.baseURL + "/group/activiti/group/adduser/"+this.groupId;
        this.$http.post(url3,this.users ).then((res) => {
            console.log(res);
          if (res.data.message.equals("success")){
            this.$Message.info('新增成功！');
          }
        })
      },*/

      selectionChange(selection){
        this.delUsers = selection;
      },
      delGroup(){
        var url3 = Api.deleteGroup + this.groupId;
        this.$http.post(url3,this.delUsers).then((res) => {
          if (res.data.message=="success"){
            this.model3 = false;
            this.$Message.info('删除成功！');
            this.details(this.processDefinitionId);
          }
        })
      },
      makeSure2(){
        this.$refs.tree2.getCheckedAndIndeterminateNodes().forEach(item=>{
          if(item.type=="user"){
            var user ={'userId':item.userId,'userName':item.userName};
            this.userData.push(user);
          }
        })
        var url3 = Api.addUserToGroup+this.groupId;
        this.$http.post(url3,this.userData ).then((res) => {
          if (res.data.message=="success"){
            this.details(this.processDefinitionId);
            this.model2 = false;
            this.groupId = '';
            this.userData = [];
            this.$Message.info('新增成功！');
          }
        })
      },
      createGroup(){
        this.model1=true;
      },
      changepage(pageIndex) {
        //当页码改变,选择获取当前页数,发送查询请求
        this.currentPage = pageIndex;
        this.selectCertificate();

      },
      nowPageSize(size) {
        this.pageSize = size;
        this.currentPage = 1;
        this.selectCertificate();

      },
      activitiChange(row){
      	/*this.selectshow = !this.selectshow*/

      },
      activitiChange1(row){
        this.oldUsers = row.nodeGroup[0].users;
        this.model3=true;
      },
      rowClassName(row, index) {
        return 'tdHeight';
      }
    }
  }
</script>

<style>
    @import '../../../index.css';
  /*.personalAgent {
    .addbutton {
      width: 100px;
      height: 30px;
      margin-top: 5px;
      margin-bottom: 10px;
    }
    ivu-table .tdHeight td {
      height: 40px;
    }
    .intest {
      width: 200px;
      height: 28px;
      background-color: #ffffff;
      border: 1px solid #dcdee2;
      border-radius: 4px;
    }
    .btn {
      background-color: #2d8cf0;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      border: 1px solid #dcdee2;
      text-align: center;
      vertical-align: middle;
      margin-left: 10px;
    }
  }*/
</style>
